"use client";

import React, { useState } from "react";
import { Tabs } from "antd";
import { useParams } from "next/navigation";
import AnswerAnalysis from "./components/AnswerAnalysis";
import AssessmentReport from "./components/AssessmentReport";
import RecommendList from "./components/RecommentList";
import { ModuleName, PRACTICE_ANALYTIC_TABS } from "./constant";
import "./index.css";

const PracticeAnalytic: React.FC = () => {
    const [currentKey, setCurrentKey] = useState<ModuleName>(
        ModuleName.assessment
    );
    const params = useParams();
    const practiceId = params?.id as string;

    /**
     * 切换card tab
     * @param key - 当前选中的tab key
     */
    const handleTabChange = (key: string) => {
        setCurrentKey(key as ModuleName);
    };

    const renderContent = () => {
        switch (currentKey) {
            case ModuleName.assessment:
                return (
                    <AssessmentReport
                        onHandleAnswerAnalysis={handleTabChange}
                        practiceId={practiceId}
                    />
                );
            case ModuleName.analysis:
                return <AnswerAnalysis practiceId={practiceId} />;
            case ModuleName.recommend:
                return <RecommendList practiceId={practiceId} />;
            default:
                return null;
        }
    };

    return (
        <div className="practice-analytic-container">
            <Tabs
                size="default"
                type="card"
                activeKey={currentKey}
                defaultActiveKey={currentKey}
                items={PRACTICE_ANALYTIC_TABS}
                onChange={handleTabChange}
                className="practice-analytic-tabs"
            />
            {renderContent()}
        </div>
    );
};

export default PracticeAnalytic;
